<template>
  <view class="page">
    <view class="fixedhead">
      <view class="flxmy">
        <image src="/src/static/images/xx.png" @click="navigateTo('/pages/announcement/index')" />
        <image src="/src/static/images/set.png" @click="navigateTo('/pages/logout/index')" />
      </view>
    </view>

    <view class="content">
      <view class="con_a">
        <view class="information">
          <image src="/src/static/images/avatar.png" />
          <view class="inf_a">
            <view class="name" @click="navigateTo('/pages/modifyData/index')">
              <text>{{ userInfo.mobile }}</text>
              <image src="/src/static/images/diamond-member.png" />
              <view>{{ userInfo.level }}</view>
            </view>
            <view class="number yaoqingma"
              ><text>SIW1Tn</text><text @click="clickCopy">复制</text></view
            >
          </view>
        </view>
        <view class="arrow">
          <u-icon name="arrow-right" size="14" />
        </view>
      </view>

      <view class="con_b">
        <view class="commodity" @click="clickCommodity">
          <text class="com_a">我的商品</text>
          <text class="com_b">{{ userInfo.product_count }}</text></view
        >
      </view>

      <view class="con_c">
        <view class="back" @click="navigateTo('/pages/lucky/index')">
          <view class="back_a">
            <image src="/src/static/images/small1.png" />
            <text>{{ userStore.getConfig?.gold_name }}</text>
          </view>
          <view class="back_b">
            <text>余额：{{ userInfo.gold }}</text>
            <image src="/src/static/images/step2.png" />
          </view>
        </view>
        <view class="back box" @click="navigateTo('/pages/magic/index')">
          <view class="back_a">
            <image src="/src/static/images/small2.png" style="width: 10px; height: 20px" />
            <text>{{ userStore.getConfig?.diamond_name }}</text>
          </view>
          <view class="back_b">
            <text>余额：{{ userInfo.diamond }}</text>
            <image src="/src/static/images/step1.png" />
          </view>
        </view>
      </view>

      <view class="con_d">
        <view class="tle_gro">
          <view class="title">我的订单</view>
          <view class="all">
            <text @click="navigateTo('/pages/orderList/index?showTab=0')">全部订单</text>
            <u-icon name="arrow-right" size="8" />
          </view>
        </view>

        <view class="square1">
          <view class="que" @click="navigateTo('/pages/orderList/index?showTab=0')">
            <image src="/src/static/images/goods4.png" />
            <view>全部订单</view>
          </view>
          <view class="que" @click="navigateTo('/pages/orderList/index?showTab=1')">
            <image src="/src/static/images/goods2.png" />
            <view>待发货</view>
          </view>
          <view class="que" @click="navigateTo('/pages/orderList/index?showTab=2')">
            <image src="/src/static/images/goods3.png" />
            <view>待收货</view>
          </view>
        </view>
      </view>
      <view class="con_d">
        <view class="tle_gro">
          <view class="title">其他功能</view>
        </view>
        <view class="square">
          <view class="que" @click="navigateTo('/pages/address-list/index')">
            <image src="/src/static/images/function3.png" />
            <view>地址管理</view>
          </view>
          <view class="que" @click="clickShare">
            <image src="/src/static/images/function5.png" />
            <view>分享有礼</view>
          </view>
          <view class="que" @click="navigateTo('/pages/customer-service/index')">
            <image src="/src/static/images/lxkf.png" />
            <view>联系客服</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { emitter } from '@/utils/mitt';
  import { nextTick, ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { onShow } from '@dcloudio/uni-app';
  import { applyShareCodeApi, getUserInfoApi } from '@/api/index';

  const userStore = useUserStore();
  const userInfo = ref<any>({});
  function clickCommodity() {
    uni.switchTab({ url: '/pages/warehouse/index' });
    nextTick(() => {
      emitter.emit('warehouse', 'commodity');
    });
  }

  function navigateTo(url) {
    uni.navigateTo({
      url,
    });
  }
  onShow(() => {
    if (!userStore.getToken) {
      uni.navigateTo({
        url: '/pages/login/index',
      });
    } else {
      getUserInfoApi().then((res) => {
        userInfo.value = {
          ...res,
          mobile: res.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        };
      });
    }
  });
  function clickShare() {
    applyShareCodeApi()
      .then(() => {
        uni.showToast({
          title: '分享成功',
          icon: 'success',
        });
      })
      .finally(() => {
        uni.switchTab({
          url: '/pages/share/index',
        });
      });
  }

  function clickCopy() {
    uni.setClipboardData({
      data: 'SIW1Tn',
      success: function () {
        uni.showToast({
          title: '复制成功',
          icon: 'success',
        });
      },
    });
  }
</script>

<style lang="less">
  .page {
    .fixedhead {
      display: flex;
      justify-content: flex-end;
      .flxmy {
        height: 44px;
        display: flex;
        justify-self: flex-end;
        align-items: center;
        margin-right: 3%;

        uni-image {
          width: 23px;
          height: 23px;
        }

        uni-image:first-of-type {
          margin-right: 20px;
        }
      }
    }

    .content {
      padding: 0 4% 75px;

      .con_a {
        position: relative;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .information {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          uni-image {
            width: 62px;
            height: 62px;
            border-radius: 50%;
          }

          .inf_a {
            position: relative;
            margin-left: 8px;
            height: 62px;

            .name {
              font-size: 18px;
              font-weight: 600;
              color: #323232;
              margin-top: 5px;
              display: flex;
              align-items: center;

              > uni-image {
                width: 25px;
                height: 25px;
                margin-left: 10px;
              }
            }

            .yaoqingma {
              width: 250px;
              position: absolute;
              bottom: 3px;
            }

            .number {
              margin-top: 10px;
              color: #b8bbc3;

              uni-text:nth-of-type(1) {
                color: #b8bbc3;
                margin-left: 5px;
              }

              uni-text:nth-of-type(2) {
                display: inline-block;
                width: 45px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 12px;
                border-radius: 20px;
                border: 1px solid #ccc;
              }

              uni-text {
                margin-left: 10px;
              }
            }
          }
        }
      }

      .con_b {
        width: 100%;
        height: 60px;
        background: linear-gradient(248deg, #262b3c, #3e4459);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        .line {
          width: 1px;
          height: 18px;
          background: #fff;
          opacity: 0.22;
        }

        .commodity {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .com_a {
            font-size: 13px;
            color: #b8bbc3;
          }

          .com_b {
            margin-left: 5px;
            font-size: 17px;
            color: #fff;
          }
        }
      }

      .con_c {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 8px 0 10px;

        .back {
          width: 167px;
          height: 71px;
          background: url()
            no-repeat;
          background-size: contain;
          border-radius: 3px;

          .back_a {
            padding: 10px 15px 8px;

            uni-image {
              width: 18px;
              height: 18px;
            }

            uni-text {
              margin-left: 6px;
              font-size: 15px;
              font-weight: 600;
              color: #7b50ff;
            }
          }

          .back_b {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;

            uni-text {
              font-size: 13px;
              color: #a38dfa;
            }

            uni-image {
              width: 23px;
              height: 14px;
            }
          }
        }

        .box {
          background: url()
            no-repeat;
          background-size: contain;

          .back_a {
            uni-text {
              color: #fb8b46;
            }
          }

          .back_b {
            uni-text {
              font-size: 13px;
              color: #ffaa79;
            }
          }
        }
      }

      .con_d {
        width: 100%;
        background: #fff;
        border-radius: 3px;
        margin-bottom: 13px;

        .tle_gro {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 10px;

          .title {
            font-size: 13px;
            font-weight: 600;
            color: #000;
          }

          .all {
            display: flex;

            uni-text {
              font-size: 12px;
              color: #b1afba;
              margin-right: 6px;
            }
          }
        }
        .square1 {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 14px 0 0;
          .que {
            position: relative;
            margin-bottom: 15px;
            width: 33.33%;
            text-align: center;

            uni-image {
              width: 29px;
              height: 29px;
            }

            uni-view {
              margin-top: 6px;
              text-align: center;
              font-size: 12px;
              color: #818181;

              uni-text {
                font-size: 12px;
                color: #ee3a66;
              }
            }
          }
        }
        .square {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 14px 0 0;

          .que {
            position: relative;
            margin-bottom: 15px;
            width: 25%;
            text-align: center;

            uni-image {
              width: 29px;
              height: 29px;
            }

            uni-view {
              margin-top: 6px;
              text-align: center;
              font-size: 12px;
              color: #818181;

              uni-text {
                font-size: 12px;
                color: #ee3a66;
              }
            }
          }
        }
      }
    }
  }
</style>
